<script setup>
import { ref, watch } from 'vue';
import NavBreadcrumb from './NavBreadcrumb.vue';
import { Random } from 'mockjs'
const emit = defineEmits(['onCollapsed'])
const props = defineProps(['width', 'collapsed', 'menus'])
// 初始值
const width = ref(props.width)
const collapsed = ref(false)
const menus = ref([])
watch(() => props.collapsed, () => {
    width.value = props.width
    menus.value = props.menus
    collapsed.value = props.collapsed

}, {
    immediate: true
})
const switchCollapsed = () => {
    emit('onCollapsed', collapsed.value)
}
let operate_button_name = ref('close')
const switchOperateButton = () => {
    const button_name = operate_button_name.value
    if (button_name === 'close') {
        operate_button_name.value = 'min'
    } else if (button_name === 'min') {
        operate_button_name.value = 'max'
    } else if (button_name === 'max') {
        operate_button_name.value = 'unmax'
    } else if (button_name === 'unmax') {
        operate_button_name.value = 'close'
    }
}
const appOperate = (name) => {
    switch (name) {
        case 'close':
            window.electron.operate('close')
            break;
        case 'min':
            window.electron.operate('min')
            break;
        case 'max':
            window.electron.operate('max')
            operate_button_name.value = 'unmax'
            break;
        case 'unmax':
            window.electron.operate('unmax')
            operate_button_name.value = 'max'
            break;
    }
}
</script>

<template>
    <Menu mode="horizontal" theme="light" active-name="1">
        <div class="layout-logo" :style="{ width: width }" style="transition: all 0.6s linear;">
            <img :src="Random.dataImage('40x40', 'Electron')" :width="menus.logo.width" :height="menus.logo.width" style="border-radius: 50%;background-size: cover;" :alt="menus.logo.alt"/>
            <span v-show="!collapsed">{{ menus.title }}</span>
        </div>
        <div class="layout-nav">
            <div class="breadcrumb">
                <Space>
                    <Button icon="md-menu" @click="switchCollapsed"></Button>
                    <NavBreadcrumb></NavBreadcrumb>
                </Space>
            </div>
            <div class="menu">
                <template v-for="menu, index in menus.list" :key="index">
                    <Submenu v-if="menu.children" :name="index + 1">
                        <template #title>
                            <Icon :type="menu.icon"></Icon>
                            {{ menu.name }}
                        </template>
                        <template v-for="menuitem, itemindex in menu.children" :key="itemindex">
                            <MenuItem :name="(index + 1) + '-' + (itemindex + 1)" :to="menuitem.to">
                            <Icon :type="menuitem.icon"></Icon>
                            {{ menuitem.name }}
                            </MenuItem>
                        </template>
                    </Submenu>
                    <MenuItem v-else :name="index + 1" :to="menu.to">
                    <Icon :type="menu.icon"></Icon>
                    {{ menu.name }}
                    </MenuItem>
                </template>
                <div class="app-operate">
                    <Space>
                        <Transition name="app-operate-fade" mode="out-in">
                            <Button v-if="operate_button_name === 'close'" type="text" size="small" icon="md-close"
                                @click="appOperate('close')"></Button>
                            <Button v-else-if="operate_button_name === 'min'" type="text" size="small" icon="md-remove"
                                @click="appOperate('min')"></Button>
                            <Button v-else-if="operate_button_name === 'max'" type="text" size="small"
                                icon="md-contract" @click="appOperate('max')"></Button>
                            <Button v-else-if="operate_button_name === 'unmax'" type="text" size="small"
                                icon="md-qr-scanner" @click="appOperate('unmax')"></Button>
                        </Transition>
                        <Button type="text" size="small" icon="md-arrow-dropup-circle"
                            @click="switchOperateButton"></Button>
                    </Space>
                </div>
            </div>
        </div>
    </Menu>
</template>

<style lang="less" scoped>
.ivu-menu {
    height: 100%;
    display: flex;
    user-select: none;
    .layout-logo {
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-right: 1px solid lightgray;

        button {
            -webkit-app-region: no-drag;
        }
    }

    .layout-nav {
        height: 100%;
        flex: 1;
        // 将头部区域标记为 可拖拽
        -webkit-app-region: drag;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .breadcrumb {
            display: flex;
            align-items: center;
            padding-left: 10px;
            // 导航菜单内容标记为不可拖拽
            -webkit-app-region: no-drag;
        }

        .menu {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            
            .app-operate {
                padding: 0px 20px;
                // 应用操作内容标记为不可拖拽
                -webkit-app-region: no-drag;
            }
        }


        .ivu-menu-item,
        .ivu-menu-submenu {
            height: 100%;
            display: flex;
            align-items: center;
            // 导航菜单内容标记为不可拖拽
            -webkit-app-region: no-drag;
        }
    }
}

.app-operate-fade-enter-from {
    transform: translateY(50px);
}

.app-operate-fade-leave-to {
    transform: translateY(-50px);
}

.app-operate-fade-enter-from,
.app-operate-fade-leave-to {
    opacity: 0;
}

.app-operate-fade-enter-active {
    transition: all 0.3s ease;
}

.app-operate-fade-leave-active {
    transition: all 0.2s ease;
}

.app-operate-fade-enter-to,
.app-operate-fade-leave-from {
    opacity: 1;

}
</style>